<template>
  <div class="login-main">
    <div class="com-header">
      <button @click="back"><i></i></button>
    </div>
    <!-- 网页内容区域 -->
    <div class="view-content">
        <img class="logo" src="~assets/image/login/logo.png" alt="快眼看书logo">
        <div class="tab-wrapper">
            <button @click="isLogin=true" :class="{'select-btn': isLogin}">登录</button>
            <button @click="isLogin=false" :class="{'select-btn': !isLogin}">注册</button>
        </div>
        <div class="form-wrapper">
            <div class="input-item">
                <i class="user-icon"></i><input type="text" v-model="username" placeholder="请输入用户名">
            </div>
            <div class="input-item">
                <i class="psd-icon"></i><input type="password" v-model="password" placeholder="请输入密码">
            </div>
            <div class="input-item" v-if="!isLogin">
                <i class="psd-icon"></i><input type="password" v-model="password_confirmation" placeholder="请输入密码">
            </div>
        </div>
        <div class="submitBtn">
            <button @click="submitMethod">{{isLogin?'登录':'注册'}}</button>
        </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'
  import api from '~/plugins/api.js'
  import axios from 'axios'
  import qs from 'qs'
  import storage from 'localforage'
  export default {
    head: {
      title: '登录/注册 - 快眼小说',
      meta: [{
            name: 'description',
            content: '快眼看书小说搜索引擎聚合网络各大小说网站最新小说章节,无广告无弹窗全文阅读.'
        },{
            name: 'keyWords',
            content: '快眼看书,kuaiyankanshu,小说搜索,小说搜索网,小说分类,小说排行'
        }]
    },
    data () {
      return {
         isLogin: true,
         username: '',
         password: '',
         password_confirmation: '',
         userInfo: {},
      }
    },
    mounted() {
       
    },
    methods: {
        submitMethod() {
            if(this.isLogin){
                this.login()
            }else{
                this.register()
            }
        },
        async login() {
            let paramsData = {
                username: this.username,
                password: this.password
            }
            let result = await axios.post(api.login,qs.stringify(paramsData))
            if(result){
                if(result.data.status==1){
                    this.userInfo = await storage.setItem('userinfo',result.data.data)
                    this.syncShelfAction()
                    
                }else{
                    Toast(result.data.info)
                }
            }
        },
        async register() {
            let reg = /^[a-z0-9]+$/i
            if(!this.username.match(reg)){
                Toast('用户名为3-15字母或数字')
                return 
            }
             if(this.username.length>25||this.username.length<3){
                Toast('用户名为3-15字母或数字')
                return 
            }
            if(this.password.length==0){
                Toast('密码不能为空')
                return
            }
            if(!this.password.match(reg)){
                Toast('密码为字母或数字')
                return 
            }
            if(this.password_confirmation != this.password){
                Toast('两次密码不一致')
                return
            }
            let paramsData = {
                username: this.username,
                password: this.password,
                password_confirmation: this.password_confirmation
            }
            let result = await axios.post(api.register,qs.stringify(paramsData))
            if(result){
                if(result.data.status==1){
                    this.userInfo = await storage.setItem('userinfo',result.data.data)
                    this.syncShelfAction()
                    
                }else{
                    Toast(result.data.info)
                }
            }

        },
        async syncShelfAction() {
            let bookshelfIdArr = await storage.getItem('bookshelfIdKey')
            if(bookshelfIdArr){
                var novelJson = {}; 
                bookshelfIdArr.forEach(function(item){
                    novelJson[item] = item;
                })
                   
                let paramsData = {
                    uid: this.userInfo.uid,
                        token: this.userInfo.token,
                        novelJson: JSON.stringify(novelJson)
                    }
                    let result = await axios.post(api.syncShelf,qs.stringify(paramsData))
                    if(this.$route.query.novelId){
                        this.$emit('readLoginBack')
                    }else{
                        this.$router.push('/user')
                    }
                    
             }else{
                   if(this.$route.query.novelId){
                        this.$emit('readLoginBack')
                    }else{
                        this.$router.push('/user')
                    }
            }  
        },
        back() {
            if(this.$route.query.novelId){
                this.$emit('readLoginBack')
            }else{
                this.$router.go(-1)
            }
        }
    }
  }
</script>
